<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="list"></div>

    <script>

        const html = String.raw;
        const list = document.getElementById('list')

        const users = [
            { name: 'jack', age: 20 },
            { name: 'lili', age: 19 },
            { name: 'lucy', age: 21 },
            { name: 'wukong', age: 22 },
            { name: 'tom', age: 18 },
        ];

        // 数据可视化
        function renderTable(users) {
            const trs = users.reduce((str, el) => {
                str += html`
                <tr>
                    <td>${el.name}</td>
                    <td>${el.age}</td>
                </tr>
                `;
                return str;
            }, '');
            return html`
            <table id="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    ${trs}
                </tbody>
            </table>
            `;
        }
        list.innerHTML = renderTable(users);


        // const html = String.raw;
        // const str = html`<a href=""></a>hello ${1 + 1}`;
    </script>
</body>

</html>